<template>
	<view class="">
		<view class="">
			<view class="top-bg"></view>
			<view class="image-con">
				<view class="image_12 flex-row justify-end">
					<!-- <image src="/static/img/vip-bg.png" mode="" class="vip-bg"></image> -->

					<view class="vip">VIP</view>
					<view class="flex-col" style="padding: 0 30rpx;width: 94%;">
						<view class="">会员福利</view>
						<view class="" v-if="userInfo.isVip == 1">有效期至:{{ userInfo.vipEndTime }}</view>
						<view class="" v-else>开通会员优惠多多~</view>
					</view>
					<!-- <image src="/static/img/hongbao.png" mode="" class="vip-icon"></image> -->
					<view class="vip-con">月卡权益</view>
				</view>
			</view>

			<view class="" style="padding: 25rpx;">
				<view class="item-con">
					<view class="title">月卡套餐</view>
					<view class="item_box flex-row" style="flex-wrap: wrap;">
						<view class="item flex-col items-center justify-center" :key="k" v-for="(item, k) in dataList" @click="change(item, k)" :class="{ active: current == k }">
							<view class="x1">{{ item.name }}</view>
							<view class="x2">{{ item.price }}元/{{ item.month }}个月</view>
						</view>
					</view>
				</view>
				<view class="item-con">
					<view class="title">支付方式</view>
					<u-radio-group v-model="type">
						<view class="btn-circle btn flex-row items-center justify-between" @click="type = 0">
							<view class="flex-row items-center">
								<image src="/static/img/wexin.png" mode="" style="width:40rpx;height:35rpx;"></image>
								<!-- <u-icon name="/static/img/wexin.png" size="36"></u-icon> -->
								<text style="padding-left:16rpx;">微信支付</text>
							</view>
							<u-radio name="0"></u-radio>
						</view>
						<view class="btn-circle btn flex-row items-center justify-between" style="margin-top: 30rpx;" @click="type = 1">
							<view class="flex-row items-center">
								<image src="/static/img/hongbao.png" mode="" style="width: 35rpx;height: 49rpx;"></image>
								<!-- <u-icon name="/static/img/hongbao.png" size="36"></u-icon> -->
								<text style="padding-left:16rpx;">奖励金金额</text>
							</view>
							<u-radio name="1"></u-radio>
						</view>
					</u-radio-group>
				</view>

				<!-- <view class=""> -->

				<view class="btn-fill btn" hover-class="hover-opacity" @click="submit">确认支付{{ currentActive.price }}元</view>

				<view class="flex-row items-center justify-center xieyi">
					<u-icon name="checkmark-circle" size="30" color="#999"></u-icon>
					<text style="color: #999999;margin-lef:10rpx;">已阅读并同意</text>
					<text @click="navTo('/pages/public/fuwenben?type=8')">《xxx会员服务协议》</text>
				</view>
				<!-- </view> -->
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			dataList: [],
			currentActive: {},
			type: 0
		};
	},
	computed: {
		userInfo() {
			return getApp().globalData.userInfo;
		}
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		change(item, index) {
			this.current = index;
			this.currentActive = item;
		},
		async loadData() {
			const res = await this.$request('user/month-card-list', {}, { showLoading: true });
			if (res.result == 0) {
				this.dataList = res.dataList;
				if (res.dataList.length != 0) this.currentActive = res.dataList[0];
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async submit() {
			var payType = this.type
			// #ifdef APP-PLUS
			this.type == 0 ? payType = 2 : ''
			// #endif
			
			const data = {
				uid: uni.getStorageSync('uid'),
				type: payType,
				month: this.currentActive.month,
				price: this.currentActive.price,
			};
			const res = await this.$request('user/pay-month-card', data, { showLoading: true });
			if (res.result == 0) {
				if (res.data && res.data.body) this.PaySingData(res.data.body);
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		PaySingData(data, orderId, type) {
			let _this = this;
			var form = {
				timeStamp: data.timestamp,
				nonceStr: data.noncestr,
				package: `prepay_id=${data.prepayid}`,
				signType: data.signType,
				paySign: data.sign,
			}
			// #ifdef APP-PLUS
			form = {
				orderInfo: data
			}
			// #endif
			uni.requestPayment({
				...form,
				success(res) {
					_this.$util.msg('购买成功!');
					_this.back();
				},
				fail(res) {}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.vip {
	font-size: 70rpx;
	font-weight: 500;
	color: #000000;
}
// .vip-icon {
// 	width: 70rpx;
// 	height: 78rpx;
// }
.image_12 {
	width: 706rpx;
	height: 253rpx;
	border-radius: 20rpx;
	background: url('/static/img/vip-bg.png') no-repeat;
	background-size: 100% 100%;
	padding: 80rpx 120rpx;
	position: relative;
}
.image-con {
	position: absolute;
	top: 50rpx;
	left: 20rpx;
}
.vip-con {
	position: absolute;
	bottom: -41rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 274rpx;
	height: 83rpx;
	text-align: center;
	line-height: 83rpx;
	background: linear-gradient(0deg, #e6c3a0, #f3dbc3);
	box-shadow: 0px 10rpx 30rpx 0px rgba(186, 152, 118, 0.51);
	border-radius: 42rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #3e3d3b;
}
.top-bg {
	width: 750rpx;
	height: 160rpx;
	background: $uni-color-bg;
	position: relative;
	margin-bottom: 180rpx;
}

.item-con {
	background: #ffffff;
	padding: 30rpx;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
}
.active {
	background: #e0efff !important;
	border-color: #419eff !important;
	.x1 {
		color: #419eff;
	}
	.x2 {
		color: #2576cb;
	}
}
.title {
	line-height: 90rpx;
	font-size: 28rpx;
	color: #333333;
}
.item {
	width: 186rpx;
	height: 106rpx;
	background: #f6f6f6;
	border: 1rpx solid #dcdcdc;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	margin-right: 40rpx;
}
.item:nth-child(3n) {
	margin-right: 0;
}
.x1 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
}

.x2 {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.btn-circle {
	border: 1rpx solid #e7e7e7;
	padding-left: 44rpx;
}
.btn-fill {
	background: $uni-color-bg;
	font-size: 30rpx;
	color: #000000;
	margin: 30rpx 0;
}
.btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 44rpx;
}
.xieyi {
	font-size: 22rpx;
}
</style>
